{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}

{#  没有需要加载的文件#}
 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_sub5 %}
    'active'
{% endblock %}

{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>数据源展示</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        数据源统计
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>出租车数据源</li>
                </ul>
            </div>
        </div>
    </div>
{#{% for i in gps_data_list %}#}
{#    {% print i %}#}
{#    {% endfor %}#}
<div class='group-header'>
    <div class='row-fluid'>
        <div class='span6 offset3'>
            <form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
                <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
                时间： <input type="text"  value="{{ date }}" name="date" id="datetimepicker"  />

            <button class="btn btn-link icon-search " name="button" type="submit"></button>
    <a class="icon-download" download={{ date }}.xlsx href='/bootstrap/tmp/{{ date }}.xlsx' ></a>&nbsp&nbsp&nbsp&nbsp
</form>
        </div>
    </div>
</div>

{#<div class='group-header'>#}
{#    <div class='row-fluid'>#}
{#        <div class='span6 offset3'>#}
{#            <div class='text-center'>#}
{#                <h2>Dynamic tables</h2>#}
{#                <small class='muted'>Dynamic datables can handle large data collections, sorting, filtering...</small>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}

<div class='row-fluid'>
    <div class='span6'>
    <div id="main1" style="width: 400px;height:400px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });


option = {
    title : {
        text: 'GPS 数据分布',
        subtext: 'data from GPS(单位:10万) ',

        x:'center'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['']
    },
    dataRange: {
        min : 0,
        max : 5000,
        calculable : true,
        color: ['maroon','purple','red','orange','yellow','lightgreen']
    },
{#    toolbox: {#}
{#        show : true,#}
{#        orient : 'vertical',#}
{#        x: 'right',#}
{#        y: 'center',#}
{#        feature : {#}
{#            mark : {show: true},#}
{#            dataView : {show: true, readOnly: false},#}
{#            restore : {show: true},#}
{#            saveAsImage : {show: true}#}
{#        }#}
{#    },#}
    series : [
        {
            name: 'GPS',
            type: 'map',
            mapType: 'china',
            hoverable: false,
            roam:true,
            data : [],
            markPoint : {
                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                itemStyle: {
                    normal: {
                        borderColor: '#87cefa',
                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                        label: {
                            show: false
                        }
                    },
                    emphasis: {
                        borderColor: '#1e90ff',
                        borderWidth: 5,
                        label: {
                            show: false
                        }
                    }
                },
                data : [
                            {% for i in gps_data_list %}
{#                            {% print i %}#}
                            {{ i|json_data|safe }},
                    {% endfor %}
                ]
            },
            geoCoord: {
                "泉州":[118.58,24.93],
                "瑞明":[121.48,31.22],
                "途锐":[122.48,31.22],
                "厦门":[118.1,24.46],
                "南昌":[115.89,28.68],
                "烟台":[121.39,37.52],
                "福州":[119.3,26.08],

                "东莞":[113.75,23.04],

                "惠州":[114.4,23.09],

                "中山":[113.38,22.52],
                "昆明":[102.73,25.04],

                "深圳":[114.07,22.62],
                "珠海":[113.52,22.3],

                "佛山":[113.11,23.05],
                "海口":[110.35,20.02],

{#                "三亚":[109.511909,18.252847],#}

                "西宁":[101.74,36.56],

                "成都":[104.06,30.67],
                "杭州":[120.19,30.26],
                "重庆":[106.54,29.59],
                "绍兴":[120.58,30.01],
                "南京":[118.78,32.04],
                "贵州":[107.71,27.57],
                "贵阳":[106.71,26.57],
                "常州":[119.95,31.79],
                "金银建":[115.46,39.92],
                "奇华":[114.46,39.92],
                "乌鲁木齐":[87.68,43.77],
                "沈阳":[123.38,41.8],
                "长沙":[113,28.21],
                "合肥":[117.27,31.86],
                "武汉":[114.31,30.52],


            }
        },

        {
            name: '',
            type: 'map',
            mapType: 'china',
            data:[],
            markPoint : {
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/1000
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    }
                },
                data : [
{#                    {name: "奇华", value: 2500},#}
{#                    {name: "菏泽", value: 194},#}
{#                    {name: "合肥", value: 229},#}
{#                    {name: "武汉", value: 273},#}
{#                    {name: "大庆1", value: 111},#}
{#                    {name: "大庆2", value: 112}#}
                        {% for i in gps_data_list %}
{#                            {% print i %}#}
                            {{ i|json_data|safe }},
                    {% endfor %}
                ]
            }
        }
    ]
};

    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();


    </script>
</div>
    <div class='span6'>
    <div id="main2" style="width: 400px;height:400px;"></div>
    <script type="text/javascript">

var Chart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据

    Chart2.showLoading({
        text: '正在努力的读取数据中...'
    });


option = {
    title : {
        text: '车辆数据分布',
        subtext: 'data from GPS(单位:万)',

        x:'center'
    },
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['']
    },
    dataRange: {
        min : 0,
        max : 50,
        calculable : true,
        color: ['maroon','purple','red','orange','yellow','lightgreen']
    },
{#    toolbox: {#}
{#        show : true,#}
{#        orient : 'vertical',#}
{#        x: 'right',#}
{#        y: 'center',#}
{#        feature : {#}
{#            mark : {show: true},#}
{#            dataView : {show: true, readOnly: false},#}
{#            restore : {show: true},#}
{#            saveAsImage : {show: true}#}
{#        }#}
{#    },#}
    series : [
        {
            name: 'GPS',
            type: 'map',
            mapType: 'china',
            hoverable: false,
            roam:true,
            data : [],
            markPoint : {
                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                itemStyle: {
                    normal: {
                        borderColor: '#87cefa',
                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                        label: {
                            show: false
                        }
                    },
                    emphasis: {
                        borderColor: '#1e90ff',
                        borderWidth: 5,
                        label: {
                            show: false
                        }
                    }
                },
                data : [
  {% for i in cars_list %}
{#                            {% print i %}#}
                            {{ i|json_data|safe }},
                    {% endfor %}
                ]
            },
            geoCoord: {
                "泉州":[118.58,24.93],
                "瑞明":[121.48,31.22],
                "途锐":[122.48,31.22],
                "厦门":[118.1,24.46],
                "南昌":[115.89,28.68],
                "烟台":[121.39,37.52],
                "福州":[119.3,26.08],

                "东莞":[113.75,23.04],

                "惠州":[114.4,23.09],

                "中山":[113.38,22.52],
                "昆明":[102.73,25.04],

                "深圳":[114.07,22.62],
                "珠海":[113.52,22.3],

                "佛山":[113.11,23.05],
                "海口":[110.35,20.02],

{#                "三亚":[109.511909,18.252847],#}

                "西宁":[101.74,36.56],

                "成都":[104.06,30.67],
                "杭州":[120.19,30.26],
                "重庆":[106.54,29.59],
                "绍兴":[120.58,30.01],
                "南京":[118.78,32.04],
                "贵州":[107.71,27.57],
                "贵阳":[106.71,26.57],
                "常州":[119.95,31.79],
                "金银建":[115.46,39.92],
                "奇华":[114.46,39.92],
                "乌鲁木齐":[87.68,43.77],
                "沈阳":[123.38,41.8],
                "长沙":[113,28.21],
                "合肥":[117.27,31.86],
                "武汉":[114.31,30.52],

            }
        },

        {
            name: '',
            type: 'map',
            mapType: 'china',
            data:[],
            markPoint : {
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/1000000
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    }
                },
                data : [
  {% for i in cars_list %}
{#                            {% print i %}#}
                            {{ i|json_data|safe }},
                    {% endfor %}
                ]
            }
        }
    ]
};

    Chart2.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart2.hideLoading();


    </script>
</div>
</div>


<div class='row-fluid'>
<div class='span12 box bordered-box orange-border' style='margin-bottom:0;'>
<div class='box-header orange-background'>
    <div class='title'>{{ date }} 出租车数据源情况</div>
    <div class='actions'>
        <a href="#" class="btn box-remove btn-mini btn-link"><i class='icon-remove'></i>
        </a>
        <a href="#" class="btn box-collapse btn-mini btn-link"><i></i>
        </a>
         <a class="btn box-min btn-link icon-download" download={{ date }}.xlsx href='/bootstrap/tmp/{{ date }}.xlsx' >
        </a>
    </div>
</div>
<div class='box-content box-no-padding'>
<div class='responsive-table'>
<div class='scrollable-area'>
<table class='data-table table table-bordered table-striped' style='margin-bottom:0px;'>
{#<table class="table table-striped table-bordered table-hover datatable" style='margin-bottom:0px;'>#}
<thead>
<tr>
 {% for i in table_header %}
     <th  class="sorting_asc" aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 240px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" role="columnheader" class="sorting_asc">{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{#<tr>#}
{#    <td>Sigurd Klocko</td>#}
{#    <td>norene@hotmail.com</td>#}
{#    <td>#}
{#        <span class='label label-important'>Important</span>#}
{#    </td>#}
{#    <td>#}
{#        <div class='text-right'>#}
{#            <a class='btn btn-success btn-mini' href='#'>#}
{#                <i class='icon-ok'></i>#}
{#            </a>#}
{#            <a class='btn btn-danger btn-mini' href='#'>#}
{#                <i class='icon-remove'></i>#}
{#            </a>#}
{#        </div>#}
{#    </td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#      <td>Sigurd Klocko</td>#}
{#</tr>#}
{% for row in access_data %}
    <tr>

    {% for field in row %}

        <td>{{ field|escape|default:"" }}</td>

    {% endfor %}
    </tr>
{% endfor %}





</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<hr class='hr-double' />

</div>
</div>
</div>
</section>
</div>
{% endblock %}

{% block script %}

{#表格JS#}
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.min.js' type='text/javascript'></script>
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/plugins/common/bootstrap-wysihtml5.js' type='text/javascript'></script>

<!-- / naked password -->
<script src='/bootstrap/assets/javascripts/plugins/naked_password/naked_password-0.2.4.min.js' type='text/javascript'></script>
<!-- / nestable -->
<script src='/bootstrap/assets/javascripts/plugins/nestable/jquery.nestable.js' type='text/javascript'></script>
{#<!-- / tabdrop -->#}
<script src='/bootstrap/assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/tables.js' type='text/javascript'></script>
<!-- / max length -->
<script src='/bootstrap/assets/javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min.js' type='text/javascript'></script>
<!-- / timeago -->
<script src='/bootstrap/assets/javascripts/plugins/timeago/jquery.timeago.js' type='text/javascript'></script>

<!-- / autosize (for textareas) -->
<script src='/bootstrap/assets/javascripts/plugins/autosize/jquery.autosize-min.js' type='text/javascript'></script>
<!-- / charCount -->
<script src='/bootstrap/assets/javascripts/plugins/charCount/charCount.js' type='text/javascript'></script>
<script>

$.datetimepicker.setLocale('ch');

{#$('#datetimepicker_format').datetimepicker({format: $("#datetimepicker_format_value").val()});#}
{#console.log($('#datetimepicker_format').datetimepicker('getValue'));#}

$("#datetimepicker_format_change").on("click", function(e){
	$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
	$.datetimepicker.setLocale($(e.currentTarget).val());
});

$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'ch',
timepicker:false,
format:"Y-m-d",
{#disabledDates:['1986/01/08','1986/01/09','1986/01/10'],#}
{#startDate:	'1986/01/05'#}
});
{#$('#datetimepicker').datetimepicker({value:{{ date|date:"Y-m-d H:i" }}, step:10});#}
{#$('#datetimepicker').datetimepicker({ step:10});#}
</script>
{% endblock %}
